<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>

  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #canvas {
    }
  </style>
</head>
<body>

<canvas id="canvas"></canvas>

<script type="text/javascript" src="../../js/mapv.js"></script>

<script type="text/javascript">

  var canvas = document.querySelector('#canvas');

  canvas.width = document.body.offsetWidth;
  canvas.height = document.body.offsetHeight;

  var ctx = canvas.getContext('2d');

  mapv.canvasResolutionScale(ctx);

  var data = [];

  var randomCount = parseInt(canvas.width * canvas.height / 2000);

  while (randomCount--) {
    data.push({
      geometry: {
        type: 'Point',
        coordinates: [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
      },
      count: Math.random() * 50
    });
  }

  var options = {
    max: 300,
    size: 80,
    gradient: {
      0: 'yellow',
      1: 'red'
    },
    offset: {
      x: 20,
      y: 20
    },
    draw: 'grid'
  }

  var dataSet = new mapv.DataSet(data);
  mapv.canvasDrawHoneycomb.draw(ctx, dataSet, options);

  var options = {
    fillStyle: 'rgba(55, 50, 250, 0.8)',
    shadowColor: 'rgba(55, 50, 250, 0.8)',
    shadowBlur: 10,
    size: 2,
    draw: 'simple'
  }

  mapv.canvasDrawSimple.draw(ctx, dataSet, options);

</script>

</body>
</html>
